<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物</title>
		<link rel="stylesheet" href="css/style.css">
		<script src="./js/data.js"></script>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="./js/vue.global.js"></script>
		<!-- 甘牧霖199010232 -->
	</head>
	<body>
	<div id="shopcart" class="shop-cart">
		<div class="tabs">
			<div class="border" @mouseenter="topAnim()">
				<!-- data-*表示自定义属性。 -->
				<div class="title active" data-index="0">
					全部商品
					<span class="count">3</span>
				</div>
				<div class="title" data-index="1">
					降价商品
					<span class="count">0</span>
				</div>
				<div class="title last" data-index="2">
					库存紧张
					<span class="count">0</span>
				</div>
				<div class="line"></div>
			</div>
		</div>

		<div class="lists">
			<div class="header">
				<ul class="clearfix">
					<li>
						
						<div v-bind:class="{ ckb:true,'ckb_s':checkall}"
						@Click="control_checkedAll()">

						</div>
						<label>全选</label>
					</li>
					<li class="product-info">商品信息</li>
					<li>单价</li>
					<li>数量</li>
					<li>金额</li>
					<li>操作</li>
				</ul>
			</div>
			
			<div id="shoplist" class="shoplist">
				<!-- 店铺内容及样式参考 -->
				<div class="shop" v-for="shop in shops" :key="shop.shopId">
					<div class="shop-info">
						<div v-bind:class="{ ckb:true,'ckb_s':shop.isChecked}"  @Click="check_singleStore(shop.shopId)">
					
				</div>
					<span class="shop-tip">店铺：</span>
					<a class="shop-name" href="#">
						{{shop.shopName}}
					</a>
					<a href="#" class="wangwang">旺旺</a>
				</div>
			

				<div class="products"  >
					<div class="item" v-for="(product,index) in shop.products" :class="{even :(index+2) % 2 ===0}">
						<div class="select-logo">
							<div v-bind:class="{ ckb:true,'ckb_s':product.isChecked}"@Click="check_all(shop.shopId,product.productId)">
							</div>
							<img :src="product.topImg" alt="产品logo">
						</div>
						<div class="product-detail">
							<div class="left">
								<a href="#" class="product-name">
									{{product.productName}}
								</a>
								<div class="logos">
									<a href="#" class="card">信用卡</a>
									<a href="#" class="service">保障服务</a>
									<a href="#" class="order">订单险</a>
									<a href="#" class="seven">7天无理由</a>
								</div>
							</div>
							<div class="right" v-html="product.spec">
							</div>
						</div>
						<div class="price">
							<p class="market-price">
								￥{{product.marketPrice}}
							</p>
							<p class="real-price">
								￥{{product.price}}
							</p>
						</div>
						<div class="count">
							<span class="sub" @click="product.count>1? product.count-=1:1">-</span>
							<span class="input"><input type="text" :value="product.count"></span>
							<span class="add" @click="product.count+=1">+</span>
						</div>
						<div class="amount">
							￥{{(product.price*product.count).toFixed(2)}}
						</div>
						<div class="delete">
							<a href="#" @click="deleteSingle(index,product_index) ">删除</a>
						</div>
					</div>
				</div>
				
			</div>

		<div class="operate">
			<div class="left">
				
				<div v-bind:class="{ ckb:true,'ckb_s':checkall}"@Click="control_checkedAll()">

				</div>
				<a href="javascript:void(0);" @click="deleteAll">删除</a>
			</div>

			<div class="right">
				<div>已选择商品<span class="selected-count">{{totalCount}}</span>件</div>
				<div class="amount">合计（不含运费）： <span class="sum">￥{{totalPrice}}</span></div>
				<a href="javascript:void(0);" class="settle" @click="save">结算</a>
			</div>
		</div>
	</div>
	
		
<script>
			// 创建应用实例
			Vue.createApp({
		data(){
			return {
				shops : shopcarts,
				checkall:false,
				
		}; 
	},
	methods:{
			// 实现头部的动画
			topAnim(){
			var titles = document.querySelectorAll('.title')
			var line = document.querySelector('.line')
			for (let i = 0; i < titles.length; i++) {
				titles[i].addEventListener('mouseenter', function() {
					for (var j = 0; j < titles.length; j++) {
						titles[j].classList.remove('active')
					}
					this.classList.add('active')
					line.style.left = i * line.offsetWidth + 'px'
				})
			}
			},
					// 全选
					checkedall_true(){
						this.shops.forEach((item) => {
							item.isChecked = true
							item.products.forEach((val) => {
								val.isChecked = true
							})
						})
					},
					// 取消全选
					checkedall_false(){
						this.shops.forEach((item) => {
							item.isChecked = false
							item.products.forEach((val) => {
								val.isChecked = false
							})
						})
					},
					// 控制全选
					control_checkedAll(){
						if(this.checkall==true){
							this.checkedall_false()
							this.checkall = false;
						}
						else{
							this.checkedall_true()
							
							this.checkall = true
						}
					},

					// 设置单选商品
					check_all(id1,id2){
						this.shops.forEach((item)=>{
							if(item.shopId == id1){
								item.products.forEach((item)=>{
									if(item.productId==id2){
										if(item.isChecked==true){
											item.isChecked =false
										}
										else{
											item.isChecked = true
										}
									}
								})
							}
						})
						let needResult = this.shops.map((item) => {
							let result = item.products.map((item) => {
								return item.isChecked == true
							})
							let bool = result.every((item) => {
								return item == true
							})
							item.isChecked = bool;
							console.log(item.isChecked)
							return bool;
						})
						let needBool = needResult.every((item) => {
							return item == true
						})
						if (needBool) {
							this.checkall = true
						}
						else{
							this.checkall = false
						}
					},
					// 设置单选商铺
					check_singleStore(index){
						// 选中为true，未选中为false
						this.shops.forEach((item)=>{
							if(item.shopId == index){
								if(item.isChecked==true){
	
									item.isChecked =false
								}
								else{

									item.isChecked=true
								}
							}0
								
							
						})
						let result = this.shops.map((item) =>{
							return item.isChecked
						})
						let bool = result.every((item) =>{
							// console.log(item,'every')
							return item == true
						})

						if(bool){
							this.checkall = true
						}
						else{
							this.checkall = false
						}

						// 全选商品
						let shop = this.shops.filter((item) => {
							if(index == item.shopId){
								return item;
							}
						});
						if(shop[0].isChecked){
							// 全选当前店铺的所有商品
							shop.forEach((item) => {
							item.products.forEach((val) => {
								val.isChecked = true
							})
						})
						}
						else{
							// 取消全选当前店铺的所有商品
							shop.forEach((item) => {							
							item.products.forEach((val) => {
							val.isChecked = false
							})
						})
						}
					},
					
					
					// 删除所有商品
					deleteAll() {
						if (this.checkeAll) {
							this.shops.splice(0, 3);
							this.checkeAll = !this.checkeAll;
						}
						else {
							this.shops.map((shop, index) => {
								//判断店铺是否勾选
								if (shop.isChecked) {
									this.shops.splice(index, 1)
								} else {
									this.shops.map((shop) => {
										shop.products.map((product, index) => {
											//判断商品是否勾选
											if (product.isChecked) {
												shop.products.splice(index, 1);
											}
										})
									})
								}
							});
						}
						alert("您真的不要了吗？")
					},
					// 删除单个商品
					deleteSingle(index1,index2){
						this.shops[index1].products.splice(index2,1);
						if(this.shops[index1].products.length == 0){
							this.shops.splice(index1,1)
						}
						alert("您真的不要了吗？")
				
						
						
						
					}
				
				},
				
			
		
		computed:{
			//计算总数
			totalCount: function () {
						let totalCount = 0;
						this.shops.forEach((item) => {
							item.products.forEach(val => {
								if(val.isChecked){
									totalCount += val.count;
								}
								
							})
						})
						return totalCount;
					},
			//计算总价		
			totalPrice: function(){
						let totalPrice = 0;
						this.shops.forEach((item) => {
							item.products.forEach(val => {
								if(val.isChecked){
									totalPrice += val.count * val.price;
								}
							})
						})
						return totalPrice.toFixed(2);	
			}				
		}
		}).mount('#shopcart');
		</script>
	</body>

</html>
